<template>
   <div class="itemProcess">
       <div class="item-title" v-show="personList.length>0">{{title}}
       </div>
       <div class="ul" v-show="title!='选择审批人'">
          <div class="li" v-for="(item,index) in personList" :key="index">
            <div class="left">
              <img :src="item.photo?item.photo:header" class="img" />
              <div class="name">{{item.username}}</div>
              <van-icon v-show="isChoose==1" name="cross" color="#ccc" size="10px" class="closed" @click="delItem(index)"/>
            </div>
            <div class="right" :class="{none:index==personList.length-1}">
              <van-icon name="arrow" color="#ccc" size="25px"/>
            </div>
          </div>
          <!-- ||title!='抄送人' -->
          <div class="li" v-show="isChoose==1">
            <div class="left">
              <div class="img add" @click="addPerson(selectedIds)">
                  <van-icon name="plus" color="#ccc" size="25px"/>
              </div>
            </div>
          </div>
       </div>
       <div class="ul" v-show="title=='选择审批人'">
          <div class="li" v-for="(item,index) in personList" :key="index">
            <div class="left">
              <img :src="item.photo?item.photo:header" class="img" />
              <div class="name">{{item.username}}</div>
              <van-icon v-show="isChoose==1" name="cross" color="#ccc" size="10px" class="closed" @click="delItem(index)"/>
            </div>
            <div class="right" :class="{none:index==personList.length-1}">
              <van-icon name="arrow" color="#ccc" size="25px"/>
            </div>
          </div>
          <!-- ||title!='抄送人' -->
          <div class="li" v-show="isChoose==1">
            <div class="left">
              <div class="img add" @click="addPerson(selectedIds)">
                  <van-icon name="plus" color="#ccc" size="25px"/>
              </div>
            </div>
          </div>
       </div>
   </div>
</template>
<script>
import axios from 'axios'
// import Icon from 'axios'
export default {
   props: {
    title: {
      type: String,
      default: () => ('选择抄送人'),
    },
    //是否自选0指定1自选
    isChoose: {
      type: Number,
      default: () => (0),
    },
    token: {
      type: String,
      default: () => ('deHWIRDPaYMDAxN7d2/OZop+yq/Qc53GZTo0SSItJld2BAnQDD8iwMEbjZmFcN1N'),
    },
    cid: {
      type: Number,
      default: () => (1182),
    },
    form_id: {
      type: Number,
      default: () => (34),
    },
    chooseIndex: {
      type: Number,
      default: () => (0),
    },
    personList: {
      type: Array,
      default: () => ([])
    },
    // 指定人员id
    selectedIds: {
      type: Array,
      default: () => ([])
    },
  },
  data() {
    return {
      personList1:[],
      changeList:[],
      header:require('../assets/header.png'),
    };
  },
  // components: {
  //   [Icon .name]: Icon ,
  // },
  created () {
    console.log('212',this.isChoose)
    console.log('this.personList',this.personList)
  },
  methods: {
    addPerson(user_ids){
      let data=JSON.stringify(user_ids)
      console.log('user_ids',data,this.chooseIndex)

      this.$emit('changeItem',data,this.chooseIndex)

    },
    delItem(index){
      this.$emit('delItem',this.chooseIndex,index)
    },
  },
}
</script>
<style lang="scss" scoped>
.itemProcess{
    padding: 0 15px;
    box-sizing:border-box;
    background-color:#fff;
    .item-title{
        text-align:left;
        height:40px;
        line-height:40px;
    }
    .ul{
        display:flex;
        flex-wrap: wrap;
        .li{
            width:25%;
            height:80px;
            display:flex;
            .left{
                flex:1;
                position: relative;
                .img{
                    width:50px;
                    height:50px;
                    border-radius:50%;
                    display:inline-block;
                    &.add{
                      background-color:#f5f5f5;
                      display:flex;
                      justify-content: center;
                      align-items: center;
                    }
                }
                .name{
                  text-align:center;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  width: 50px;
                }
                .closed{
                    position: absolute;
                    right:0;
                    top:0;
                    border:1px solid #999;
                    border-radius:50%;
                }
            }
            .right{
               width:30px;
               padding-top:12px;
               &.none{
                 visibility: hidden;
               }
            }
            
        }
    }
}
</style>